zoukankan      html  css  js  c++  java
  • [Angular 2] Component relative paths

    Oingial aritial --> Link

    Take away: 

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector   : 'contacts-header',
      templateUrl: './header.component.html',
      styleUrls  : ['./header.component.css']
    })
    export class HeaderComponent implements OnInit {
    }

    When you use `templateUrl` & `styleUrls`, the path are relative to the application root.

    So if you compoennt is put inside /src/app/header. Then way `templateUrl: './header.component.html'` is refer to 'src/header.component.html', so will report 404 error.

    To way to solve the problem is introduce ´moudleId: moudle.id`.

    CommonJS way:

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      moduleId: module.id,    // fully resolved filename; defined at module load time
      selector: 'contacts-header',
      templateUrl: 'header.component.html',
      styleUrls: ['header.component.css']
    })
    export class HeaderComponent implements OnInit {
    }
    //tsconfig.json
    
    {
      "compilerOptions": {
        "module": "commonjs",
        "target": "es5"
      }
    }

    SystemJS:

    import { Component, OnInit } from '@angular/core';
    
    @Component({
      moduleId: __moduleName,    // fully resolved filename; defined at module load time
      selector: 'contacts-header',
      templateUrl: 'header.component.html',
      styleUrls: ['header.component.css']
    })
    export class HeaderComponent implements OnInit {
    }

    JSPM:

    // If we decide to use JSPM, we use the typescriptOptions configuration format in the config.js file:
    
    SystemJS.config({
      typescriptOptions: {
        module: "commonjs",
        emitDecoratorMetadata: true,
        experimentalDecorators: true
      },
      transpiler: false,
      baseURL: "/dist",
      map: {
        app: 'src',
        typescript: 'node_modules/typescript/lib/typescript.js',
        angular2: 'node_modules/angular2',
        rxjs: 'node_modules/rxjs'
      },
      packages: {
        app: {
          defaultExtension: 'ts',
          main: 'app.ts'
        },
        angular2: {
          defaultExtension: 'js'
        },
        rxjs: {
          defaultExtension: 'js'
        }
      }
    });

    Webpack:

    // require
    
    import { Component } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      template: require('./header.component.html'),
      styles: [require('./header.component.css')]
    })
    export class HeaderComponent implements OnInit {
    }

    or

    // import
    
    import { Component } from '@angular/core';
    
    import { Component }  from '@angular/core';
    import headerTemplate from './header.component.html';
    import headerStyle    from './header.component.css';
    
    @Component({
      selector : 'my-app',
      template : headerTemplate,
      styles   : [headerStyle]
    })
    export class HeaderComponent implements OnInit {
    }
  • 相关阅读:
    angular中集中页面传参(我只是知识的搬运工)
    使用Cookie传递参数 ,a页面保存Cookie,b页面读取,代码如下:
    获取并处理地址栏中参数方法
    常见的css命名规范/ID命名规范/常用功能模块的命名
    angularjs 1.x 项目完整的较完整的登录验证具体代码(仅供参考)
    用angular自带的方法获取input中内容(以用户名和密码为例)的字符串长度方法
    jquery 层弹窗传值
    伯乐在线node高手的基础经验 您值得一读
    javascript 代码规范
    正确看待技术
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5576114.html
Copyright © 2011-2022 走看看