将自定义 TS 定义传递给 Angular 2 AOT 编译器
Pass custom TS definitions to Angular 2 AOT compiler
我正在使用 ngc
编译器提前编译我的 Angular 2 应用程序。在我的应用程序的一部分中,我使用了 Notification API,TypeScript 默认不包含它。当我 运行 ngc
时,它会抱怨:
c:\xampp\htdocs\project\_dev>"node_modules/.bin/ngc" -p tsconfig.aot.json
Error: Error at c:/xampp/htdocs/project/_dev/src/app/shared/notify.service.ts:34:17: Cannot find name 'Notification'.
Error at c:/xampp/htdocs/project/_dev/src/app/shared/notify.service.ts:35:17: Cannot find name 'Notification'.
Error at c:/xampp/htdocs/project/_dev/src/app/shared/notify.service.ts:35:61: Cannot find name 'NotificationPermission'.
Error at c:/xampp/htdocs/project/_dev/src/app/shared/notify.service.ts:56:36: Cannot find name 'Notification'.
at check (c:\xampp\htdocs\project\_dev\node_modules\@angular\tsc-wrapped\src\tsc.js:31:15)
at Tsc.typeCheck (c:\xampp\htdocs\project\_dev\node_modules\@angular\tsc-wrapped\src\tsc.js:86:9)
at c:\xampp\htdocs\project\_dev\node_modules\@angular\tsc-wrapped\src\main.js:33:23
at process._tickCallback (internal/process/next_tick.js:103:7)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3
Compilation failed
我有一个 window.Notification 对象及其方法的自定义 TS 定义文件,但是我如何告诉 ngc 编译器这个文件所在的位置?
我的 tsconfig.json 文件:
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"outDir": "./compiled"
},
"files": [
"./src/app/app.module.ts",
"./src/main.aot.ts"
],
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit": true
}
}
想通了:
- 在我的项目的根目录中创建了一个文件夹
custom_typings
;
- 使用我的自定义 TS 定义创建了一个名为
notification
的子文件夹和一个名为 index.d.ts
的文件;
- 将以下内容添加到我的 tsconfig 文件
compilerOptions
:
"typeRoots": [
"./custom_typings",
"./node_modules/@types"
]
编译器自动拾取它,一切正常。
我正在使用 ngc
编译器提前编译我的 Angular 2 应用程序。在我的应用程序的一部分中,我使用了 Notification API,TypeScript 默认不包含它。当我 运行 ngc
时,它会抱怨:
c:\xampp\htdocs\project\_dev>"node_modules/.bin/ngc" -p tsconfig.aot.json
Error: Error at c:/xampp/htdocs/project/_dev/src/app/shared/notify.service.ts:34:17: Cannot find name 'Notification'.
Error at c:/xampp/htdocs/project/_dev/src/app/shared/notify.service.ts:35:17: Cannot find name 'Notification'.
Error at c:/xampp/htdocs/project/_dev/src/app/shared/notify.service.ts:35:61: Cannot find name 'NotificationPermission'.
Error at c:/xampp/htdocs/project/_dev/src/app/shared/notify.service.ts:56:36: Cannot find name 'Notification'.
at check (c:\xampp\htdocs\project\_dev\node_modules\@angular\tsc-wrapped\src\tsc.js:31:15)
at Tsc.typeCheck (c:\xampp\htdocs\project\_dev\node_modules\@angular\tsc-wrapped\src\tsc.js:86:9)
at c:\xampp\htdocs\project\_dev\node_modules\@angular\tsc-wrapped\src\main.js:33:23
at process._tickCallback (internal/process/next_tick.js:103:7)
at Module.runMain (module.js:606:11)
at run (bootstrap_node.js:394:7)
at startup (bootstrap_node.js:149:9)
at bootstrap_node.js:509:3
Compilation failed
我有一个 window.Notification 对象及其方法的自定义 TS 定义文件,但是我如何告诉 ngc 编译器这个文件所在的位置?
我的 tsconfig.json 文件:
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"outDir": "./compiled"
},
"files": [
"./src/app/app.module.ts",
"./src/main.aot.ts"
],
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit": true
}
}
想通了:
- 在我的项目的根目录中创建了一个文件夹
custom_typings
; - 使用我的自定义 TS 定义创建了一个名为
notification
的子文件夹和一个名为index.d.ts
的文件; - 将以下内容添加到我的 tsconfig 文件
compilerOptions
:
"typeRoots": [
"./custom_typings",
"./node_modules/@types"
]
编译器自动拾取它,一切正常。