3

私は（現在）単一のコンポーネントを持つサードパーティモジュールに取り組んでいます。現在、テンプレートと比較的長いスタイル ルールを@Componentアノテーションにインラインで配置していますが、これは管理しにくくなっています。コードを個別のファイル ( ) に分割しようとしました.component.htmlが、ビルド プロセスを実行し、テスト アプリケーション内でコンポーネントを使用しようとすると、テンプレート 404 が表示されます。

  1. テンプレートを別のファイルに分割できますか (ビルド ステップでテンプレートのコンテンツがコンポーネント アノテーションに挿入される場合でも)。
  2. CSSで同じことができますか？
  3. CSS を SCSS に置き換えて、Component アノテーションにコードを挿入する前にその CSS をコンパイルする方法はありますか?

参考までに、以下に構成ファイルを含めます。他に役立つものがあればお知らせください。アプリの一般的な構造は、このリソース(ライブラリの Github リポジトリ) から変更されていません。リポジトリを複製し、参照を削除/置換してベースを形成することにより、プロジェクトを作成しました。

編集 私はこのSOリンクを見ましたが、可能であればビルドプロセスにgulpを統合する必要は避けたいです。

// package.json scripts

"scripts": {
    "cleanup": "rimraf dist/bundles dist/src dist/index.d.ts dist/index.js dist/index.js.map dist/LICENCE dist/README.md",
    "bundling": "rollup -c",
    "minify": "uglifyjs dist/bundles/ic-datepicker.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/async-local-storage.umd.min.js",
    "copy": "copyfiles LICENSE README.md dist",
    "build": "npm run cleanup && ngc && npm run bundling && npm run minify && npm run copy"
  },

// rollup.config.js
export default {
  entry: 'dist/index.js',
  dest: 'dist/bundles/ic-datepicker.umd.js',
  sourceMap: false,
  format: 'umd',
  moduleName: 'ng.icDatepicker',
  globals: {
    '@angular/core': 'ng.core',
    '@angular/common': 'ng-common',
    'rxjs/Observable': 'Rx',
    'rxjs/ReplaySubject': 'Rx',
    'rxjs/add/operator/map': 'Rx.Observable.prototype',
    'rxjs/add/operator/mergeMap': 'Rx.Observable.prototype',
    'rxjs/add/operator/pluck': 'Rx.Observable.prototype',
    'rxjs/add/operator/first': 'Rx.Observable.prototype',
    'rxjs/add/observable/fromEvent': 'Rx.Observable',
    'rxjs/add/observable/merge': 'Rx.Observable',
    'rxjs/add/observable/throw': 'Rx.Observable',
    'rxjs/add/observable/of': 'Rx.Observable'
  }
}

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "declaration": true,
    "stripInternal": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "module": "es2015",
    "moduleResolution": "node",
    "paths": {
      "@angular/core": ["node_modules/@angular/core"],
      "rxjs/*": ["node_modules/rxjs/*"]
    },
    "allowSyntheticDefaultImports": true,
    "rootDir": ".",
    "outDir": "dist",
    "sourceMap": true,
    "inlineSources": true,
    "target": "es5",
    "skipLibCheck": true,
    "lib": [
      "es2015", 
      "dom"
    ]
  },
  "files": [
      "index.ts"
  ],
  "angularCompilerOptions": {
    "strictMetadataEmit": true
  }
}

編集

// Component decorator
@Component({
  selector: 'ic-datepicker',
  encapsulation: ViewEncapsulation.None,
  template: `
    <!-- HTML Template -->  
  `,
  styles: [`
    // CSS styles
  `]
})

を、コンポーネント クラスと同じレベルの HTML ファイルであるに置き換えるtemplateと、このモジュールをインポートするアプリで次のエラーが発生します (ビルド後)。templateUrl: './ic-datepicker.component.html'

404 コンソール エラー

4

1 に答える 1

-1

次のように、html へのフル パスを指定してみてください。

// Component decorator
@Component({
  selector: 'ic-datepicker',
  encapsulation: ViewEncapsulation.None,
  templateUrl: "approot/ic-datepicker.component.html"
})
于 2017-01-18T21:13:58.090 に答える