1

我第一次尝试设置 TypeScript Angular Webpack 项目，但我遇到了大量错误，我希望得到一些帮助来解决。

我试图将我的项目与 angular-cli 项目进行比较，但我只是没有看到缺少什么。

我试过降级 typescript、@angular 模块和 webpack；没有喜悦。我使用了特定的包版本，因为我们在工作中这样做是为了稳定。

这感觉更像是一个需要告诉 ts-loader 在哪里找到东西的问题，因为应用程序本身只是样板文件。

在 tsconfig 中，缺少一些设置，因为 tsconfig.json 文档说它们是默认的，例如 target=es5, module=commonjs 但我很乐意尝试任何东西。其他人在那里是因为我想看看他们做了什么；如有必要，我也很乐意放弃这些。

下面，我包含 (a) 收到的错误示例 (b) package.json、(c) tsconfig.json 和 (d) webpack.config.js (e) main.ts

示例错误：

ERROR in ./~/@angular/platform-browser-dynamic/index.js
Module not found: Error: Can't resolve './src/platform-browser-dynamic' in '/Users/Ian/Desktop/TestFolder/Bare/node_modules/@angular/platform-browser-dynamic'
 @ ./~/@angular/platform-browser-dynamic/index.js 13:0-47
 @ ./src/main.ts

ERROR in ./~/@angular/platform-browser/index.js
Module not found: Error: Can't resolve './src/platform-browser' in '/Users/Ian/Desktop/TestFolder/Bare/node_modules/@angular/platform-browser'
 @ ./~/@angular/platform-browser/index.js 13:0-295
 @ ./src/app/app.module.ts
 @ ./src/main.ts

ERROR in ./~/@angular/forms/index.js
Module not found: Error: Can't resolve './src/forms' in '/Users/Ian/Desktop/TestFolder/Bare/node_modules/@angular/forms'
 @ ./~/@angular/forms/index.js 13:0-709
 @ ./src/app/app.module.ts
 @ ./src/main.ts

ERROR in ./~/@angular/core/index.js
Module not found: Error: Can't resolve './src/core' in '/Users/Ian/Desktop/TestFolder/Bare/node_modules/@angular/core'
 @ ./~/@angular/core/index.js 13:0-2208
 @ ./src/app/app.module.ts
 @ ./src/main.ts

ERROR in ./~/@angular/http/index.js
Module not found: Error: Can't resolve './src/index' in '/Users/Ian/Desktop/TestFolder/Bare/node_modules/@angular/http'
 @ ./~/@angular/http/index.js 13:0-406
 @ ./src/app/app.module.ts
 @ ./src/main.ts

包.json

{
  "name": "BareNg2",
  "version": "1.0.0",
  "main": "index.js",
  "repository": {},
  "license": "MIT",
  "scripts": {
    "w": "webpack"
  },
  "dependencies": {
    "@angular/common": "2.4.5",
    "@angular/compiler": "2.4.5",
    "@angular/core": "2.4.5",
    "@angular/forms": "2.4.5",
    "@angular/http": "2.4.5",
    "@angular/platform-browser": "2.4.5",
    "@angular/platform-browser-dynamic": "2.4.5",
    "@angular/router": "3.4.6",
    "core-js": "2.4.1",
    "rxjs": "5.1.0",
    "zone.js": "0.7.6"
  },
  "devDependencies": {
    "@types/node": "7.0.4",
    "ts-loader": "^2.0.0",
    "typescript": "2.0.10",
    "webpack": "2.1.0-beta.28",
    "webpack-dev-middleware": "1.10.0",
    "webpack-dev-server": "1.16.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es6", "dom" ],
    "listFiles": true,
    "noImplicitAny": true,
    "pretty": true,
    "strictNullChecks": true,
    "target": "ES5",
    "traceResolution": true,
    "typeRoots": [ "./node_modules/@types" ]
  }
}

webpack.config.js

'use strict';
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    app: './src/main.ts'
  },
  output: {
    path: './dist',
    filename: '[name].bundle.js'
  },
  resolve: {
    extensions: [ '.ts' ]
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          visualStudioErrorFormat: true
        }
      }
    ]
  }
}

/src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode }         from '@angular/core';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

/src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule }      from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';
import { AppComponent }  from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
4

0 回答 0