TS2304 с Webpack 2 и Angular 2

Я следил за угловой документацией о том, как использовать webpack 2 с angular 2. Мой код (github src здесь) настроен на сценарий webpack.dev.js.

Запуск сборки для разработчиков с использованием npm start (т. е. webpack-dev-server --inline --progress --port 8080) дает ряд ошибок TS2304, таких как

ERROR in [at-loader] src\app\app.component.ts:5:15
    TS2304: Cannot find name 'require'.

ERROR in [at-loader] src\app\app.component.ts:6:14
    TS2304: Cannot find name 'require'.

Что происходит не так?


webpack typescript angular webpack-dev-server
person James B    schedule 09.02.2017    source источник
comment
Попытался удалить @types и вместо этого использовать типизацию. Все равно получаю те же ошибки. Должно быть, упущено что-то простое....   -  person James B    schedule 09.02.2017
comment
Так что просто клонировал угловой быстрый запуск, и, похоже, нет проблем с его созданием и запуском.   -  person James B    schedule 09.02.2017

Ответы (3)


arrow_upward
5
arrow_downward

убедитесь, что вы установили @types/node.

затем напишите "types": ["jasmine","node"] в файле tsconfig.json, тогда эта ошибка удалится.

потому что я тоже столкнулся с той же ошибкой. это решение работает для меня.

мой tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "types": ["jasmine","node"]
  }
}

и package.json

{
  "name": "webpackCreator",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/jasmine": "^2.5.41",
    "@types/node": "^6.0.45",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.0-beta.18",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "~2.0.10",
    "webpack": "2.2.0",
    "webpack-dev-server": "2.2.0-rc.0",
    "webpack-merge": "^2.4.0"
  }
}
person Hemant Kumar    schedule 09.02.2017
comment
Добавил это, но без радости (я думаю, что компилятор машинописного текста должен их подбирать по умолчанию). Вы можете опубликовать свой tsconfig.json и, возможно, package.json? Посмотрите, есть ли отличия - спасибо. - person James B; 09.02.2017
comment
Итак, теперь у нас есть идентичные файлы tsconfig.json и package.json, но я все еще получаю все эти ошибки. Ради интереса, какая версия node у вас установлена? - person James B; 09.02.2017
comment
в настоящее время у меня есть узел v6.9.1 и npm 3.10.8 - person Hemant Kumar; 09.02.2017
comment
не могли бы вы сказать мне, где находится tsconfig.json в структуре приложения? и есть ли у вас какая-либо ошибка tsconfig.json not found в cmd? - person Hemant Kumar; 09.02.2017
comment
Нет такой ошибки и tsconfig.json на верхнем уровне, см. здесь. Это странно, потому что у меня нет проблем с созданием быстрого семени angular. - person James B; 09.02.2017
comment
хорошо, сделайте последнюю попытку, зайдите в config/webpack.common.js options: { configFileName: helpers.root('src', 'tsconfig.json') } удалите оттуда src. - person Hemant Kumar; 09.02.2017
comment
Хм. Не уверен, что для webpack есть свойство options: {.... - person James B; 09.02.2017
comment
github.com/jdbriaris/angular-webpack/ blob/master/config/ здесь - person Hemant Kumar; 09.02.2017
comment
О! Вы навели меня на правильный путь - я указывал на ./src/tsconfig.json, когда должен был указывать на ./tsconfig.json в этой опции загрузчика. Также добавлена ​​опция "typeRoots": ["./node_modules/@types"] для tsconfig.json вместо types:["jasmine","node"] см. здесь. Оба будут работать, но первый более ремонтопригоден. - person James B; 09.02.2017

arrow_upward
1
arrow_downward

Вам нужны типизации Node.js.

npm install @types/node --save-dev

person Brother Woodrow    schedule 09.02.2017
comment
Почти уверен, что у меня это есть, см. мой package.json здесь - person James B; 09.02.2017

arrow_upward
1
arrow_downward

Добавление этого в мой tsconfig.json исправило это для меня:

"typeRoots": [ 
    "../node_modules/@types/"
]

Я столкнулся с проблемой после вступления в Angular 2 Webpack (https://angular.io/docs/ts/latest/guide/webpack.html)

Код tsconfig.json в руководстве отличается от кода в zip-файле «окончательный результат» (https://angular.io/resources/zips/webpack/webpack.zip)

Вот весь мой tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es2015", "dom" ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "typeRoots": [ 
            "../node_modules/@types/"
        ]
    }
}
person Jason Watmore    schedule 17.03.2017