Webpack Html 로더가 번들로 템플릿을 추가하지 않습니다.

Question

각도 (4.4.4) 및 Webpack (3.6.0)으로 시작 프로젝트를 만드는 데 문제가 있습니다. 내 구성은 AOT 빌드와 에 template 선언을 사용하고 있지만 html 템플릿을 추가하면 (template을 templateUrl으로 바꾸면) Webpack이 무한 루프가되어 95% emtitting에 걸릴 수 있습니다. 내가 템플릿 로딩 html-loader V0.5.1을 사용하고

webpack.common.js

module.exports = { 
    entry: { 
     app: './src/main.ts', 
     vendor: getVendorPackages() 
    }, 
    output: { 
     path: __dirname + '/dist', 
     filename: "app.bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.ContextReplacementPlugin(//Resolve Angular warnings 
      /angular(\\|\/)core(\\|\/)@angular/, 
      path.resolve(__dirname, '../src') 
     ), 
     new webpack.optimize.CommonsChunkPlugin({ //Create secondary bundle containing dependencies 
      name: 'vendor', 
      filename: 'vendor.bundle.js', 
      minChunks(module) { 
       const context = module.context; 
       return context && context.indexOf('node_modules') >= 0; 
      }, 
     }), 
     new htmlWebpackPlugin({ //Generate index.html 
      template: './src/index.html' 
     }), 
     new webpack.ContextReplacementPlugin(//Only export the locals we need | https://github.com/moment/moment/issues/2517 
      /moment[\/\\]locale$/, /en|nl/ 
     ) 
    ], 
    resolve: { 
     extensions: ['.js', '.ts'] 
    } 
}; 

app.component.ts

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'hn-root', 
    // template: `<h1>Hello world</h1>` 
    templateUrl: 'app.html', 
    // styleUrls: ['./app.scss'] 
}) 
export class AppComponent { 
} 

app.html

<h1>Hello big world</h1> 

,536,913,632 10

내가 해봤

{ 
    "name": "angular-webpack-starter", 
    "version": "0.1.0", 
    "scripts": { 
    "build": "webpack --config webpack.dev.js", 
    "serve": "webpack-dev-server --config webpack.dev.js", 
    "build --prod": "webpack -p --config webpack.prod.js --progress" 
    }, 
    "dependencies": { 
    "@angular/common": "4.4.4", 
    "@angular/compiler": "4.4.4", 
    "@angular/core": "4.4.4", 
    "@angular/forms": "4.4.4", 
    "@angular/http": "4.4.4", 
    "@angular/platform-browser": "4.4.4", 
    "@angular/platform-browser-dynamic": "4.4.4", 
    "@angular/router": "4.4.4", 
    "core-js": "2.5.1", 
    "reflect-metadata": "0.1.10", 
    "rxjs": "5.4.3", 
    "zone.js": "0.8.18" 
    }, 
    "devDependencies": { 
    "@angular/compiler-cli": "4.4.4", 
    "@ngtools/webpack": "1.7.2", 
    "@types/core-js": "0.9.43", 
    "@types/node": "8.0.31", 
    "angular2-template-loader": "0.6.2", 
    "awesome-typescript-loader": "3.2.3", 
    "codelyzer": "3.2.0", 
    "html-loader": "0.5.1", 
    "html-webpack-plugin": "2.30.1", 
    "tslint": "5.7.0", 
    "typescript": "2.5.3", 
    "webpack": "3.6.0", 
    "webpack-bundle-analyzer": "2.9.0", 
    "webpack-dev-server": "2.9.1", 
    "webpack-merge": "4.1.0" 
    } 
} 

내가 분명히 뭔가 잘못하고 있어요,하지만 난 그게 뭔지 알아낼 수 없습니다 ..

---

package.json

• 변경나는 또한 대부분의 각도의 webpack.config.js을 확인 loaders:[angular2-template-loader]

loaders:[angular2-template-loader?keepUrl=true]에 변경 app.component.html (각 규칙)에 app.html 변경 './app.html'

에(각도 cli 포함) html-loader 대신 raw-loader을 사용하고 있습니다. 궁금해지면, html-loader을 AOT compilation과 함께 사용하면 인라인 HTML이 생성 될 수 있습니까?

Answer 1

내 자신의 질문에 대답하려면 webpack.common.js에서 실수를했습니다. 키 을 어디에 사용 했어야합니까? rules.

그래서 새로운 코드는 다음과 같습니다

module.exports = { 
    entry: { 
     app: './src/main.ts', 
     vendor: getVendorPackages() 
    }, 
    output: { 
     path: __dirname + '/dist', 
     filename: "website.bundle.js" 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.html$/, 
       loader: 'html-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.ContextReplacementPlugin(//Resolve Angular warnings 
      /angular(\\|\/)core(\\|\/)@angular/, 
      path.resolve(__dirname, '../src') 
     ), 
     new webpack.optimize.CommonsChunkPlugin({ //Create secondary bundle containing dependencies 
      name: 'vendor', 
      filename: 'vendor.bundle.js', 
      minChunks(module) { 
       const context = module.context; 
       return context && context.indexOf('node_modules') >= 0; 
      }, 
     }), 
     new htmlWebpackPlugin({ //Generate index.html 
      template: './src/index.html' 
     }), 
     new webpack.ContextReplacementPlugin(//Only export the locals we need | https://github.com/moment/moment/issues/2517 
      /moment[\/\\]locale$/, /en|nl/ 
     ) 
    ], 
    resolve: { 
     extensions: ['.js', '.ts'] 
    } 
}; 

이상의 특정 :

module: { 
    rules: [ 
     { 
      test: /\.html$/, 
      loader: 'html-loader' 
     } 
    ] 
}, 

you'l 또한 /\.ts$/ 규칙이 사라진 것을 알 수 있습니다. 이는 AOT 컴파일이 자체 타이프 스크립트 컴파일러를 사용하고 webpack-merge이 룰을 대체하지 않기 때문입니다. 이로 인해 컴파일을 dev 구성으로 이동해야했습니다.

webpack.dev.

"files": [ 
    "src/app/app.module.ts", 
    "src/main.ts" 
    ], 

    "angularCompilerOptions": { 
    "genDir": "aot", 
    "skipMetadataEmit" : true 
    } 

결합이 : TS

module.exports = merge(common, { 
    module: { 
     rules: [ 
      { 
       test: /\.ts$/, //Prod uses AOT for .ts and webpack does not override the rules, so they need to be separated 
       loaders: ['awesome-typescript-loader', 'angular2-template-loader'] 
      }, 
     ] 
    }, 
    plugins: [ 
     new BundleAnalyzerPlugin({ //Make bundle sizes visible 
      analyzerMode: 'static', 
      openAnalyzer: false 
     }), 
     new webpack.DefinePlugin({ //Set the node env so that the project knows what to enable or disable 
      'process.env': { 
       'NODE_ENV': JSON.stringify('development') 
      } 
     }) 
    ], 
    devtool: 'eval-source-map', 
}); 

---

나는 또한 내 tsconfig.json (AOT documentation 참조) 일부 데이터를 추가했습니다 내 대답을 확장하고 (AOT 컴파일과) 작업 예제를 만들려면 다음을 만들었습니다 tsconfig.json :

{ 
    "compilerOptions": { 
    "target": "es5", 
    "experimentalDecorators": true, 
    "emitDecoratorMetadata": true, 
    "module": "es2015", 
    "moduleResolution": "node", 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true, 
    "removeComments": false, 
    "sourceMap": true, 
    "typeRoots": [ 
     "node_modules/@types" 
    ], 
    "lib": [ 
     "es2017", 
     "dom" 
    ] 
    }, 

    "files": [ 
    "src/app/app.module.ts", 
    "src/main.ts" 
    ], 

    "angularCompilerOptions": { 
    "genDir": "aot", 
    "skipMetadataEmit" : true 
    } 
}