不使用CLI的Angular开发设置
Angular是一种流行的前端开发框架，它使用TypeScript编写，并提供了一套丰富的工具和功能，用于构建现代化的Web应用程序。在Angular开发中，CLI（命令行界面）是一个强大的工具，用于快速创建、构建和管理Angular项目。然而，如果不使用CLI，我们仍然可以进行Angular开发设置。
在不使用CLI的情况下，我们可以手动设置Angular开发环境。首先，确保已经安装了Node.js和npm（Node包管理器）。然后，按照以下步骤进行设置：
- 创建一个新的项目文件夹，并在该文件夹中打开命令行终端。
- 使用npm初始化项目，运行以下命令：npm init这将引导您创建一个新的package.json文件，其中包含项目的配置信息。
- 安装Angular依赖项。运行以下命令来安装Angular核心模块和其他必需的库：npm install @angular/core @angular/common @angular/compiler @angular/platform-browser这将安装Angular的核心模块以及与浏览器平台相关的模块。
- 创建一个index.html文件作为应用程序的入口点，并在其中引入必要的脚本和样式表。例如：<!DOCTYPE html> <html> <head> <title>Angular App</title> <script src="node_modules/@angular/core/bundles/core.umd.js"></script> <script src="node_modules/@angular/common/bundles/common.umd.js"></script> <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script> <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script> </head> <body> <app-root></app-root> </body> </html>
- 创建一个main.ts文件作为应用程序的入口文件，并编写启动Angular应用程序的代码。例如：import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));- 创建一个app.module.ts文件作为应用程序的主模块，并定义应用程序的组件和服务。例如：import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent], imports: [BrowserModule], bootstrap: [AppComponent]})
export class AppModule { }
- 创建一个app.component.ts文件作为应用程序的根组件，并编写组件的代码。例如：import { Component } from '@angular/core';
@Component({
selector: 'app-root', template: '<h1>Hello, Angular!</h1>'})
export class AppComponent { }
- 最后，在命令行终端中运行以下命令来启动应用程序：npm start这将使用内置的开发服务器启动应用程序，并在浏览器中打开它。
这样，您就可以开始使用Angular进行开发，而不使用CLI。请注意，这只是一个基本的设置示例，您可以根据项目的需求进行自定义和扩展。
对于更复杂的功能和工具，您可以查阅Angular官方文档（https://angular.io/）以获取更多信息和指导。腾讯云也提供了一系列与Angular相关的产品和服务，您可以在腾讯云官方网站（https://cloud.tencent.com/）上找到相关信息。
相关·内容
我开始学习并使用Angular做一些演示应用程序，但我仍然在努力了解一切是如何工作的，以及背后的概念和想法是什么。我找到的几乎所有资源都包含CLI，而且一切似乎都是自动的、预先配置的和简单的，但我不喜欢这样，至少在我学习的时候是这样。有没有人知道一些资源，在那里你可以学习Angular和围绕它的开发设置，而不是使用CLI
浏览 11提问于2017-12-12得票数 0
我最近刚在我的Ubuntu16.04计算机上安装了。但是当我生成一个新的角度项目时，它会生成角6。
如何生成特定的角4项目？
浏览 0提问于2018-07-12得票数 6
回答已采纳
在一个用python和angular构建的网站上工作，但在每次更改后，我需要硬重置浏览器才能看到它。我认为这通常是一个问题，那么缓存js和css资源的最佳方法是什么呢？
浏览 2提问于2017-04-20得票数 0
大家好，我想学习angular，但是我有点困惑，像angular cli有什么用?？为什么我需要写3个不同的文件，像app.html，app.component.ts和app.module.ts？我们不能直接使用angular cdn而不是在这三个文件中编写代码吗？基于组件的架构将如何更好地工作？请不要嘲笑我，我对此还很陌生，这些都是我在网上冲浪时随机想到的问题。
浏览 4提问于2017-10-11得票数 0
2回答
/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:35289:13-34 - Warning: Critical dependency:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:35301:13-100 - Warning: Critical dependency: the request of a d
浏览 13提问于2021-08-08得票数 2
回答已采纳
我使用的是ASPNetCore和Angular 7。我的Angular应用程序变得非常大，所以每次运行时都要重新编译C#代码和angular代码，这变得越来越麻烦。我的Startup.cs文件中有这一行。spa.UseAngularCliServer(npmScript: "start");有没有可能A.当我终止ASPNet应用程序时让它继续运行，或者B，单独运行它，并仍然通过aspnet应用程序正在使用的</em
浏览 38提问于2019-08-05得票数 6
回答已采纳
我知道Angular CLI有一个简单的解决方案，但有没有可能在不安装Node.js或在终端中运行npm命令的情况下设置和运行Angular应用程序。
如有任何建议，我们将不胜感激。
浏览 2提问于2018-06-15得票数 2
如果我使用$ ng new my-test-app创建一个新的角13项目并添加 console.log('Hello there');若要app.component.ts控制台中记录着"Hello那里“，但是它说它来自main.js而不是main.js"architect": {
浏览 11提问于2022-03-31得票数 1
回答已采纳
这是angular.json的一部分。"with": "src/environments/environment.prod.ts" ]我想要做的是控制开发环境例如，将sourceMap更改为false，我不希望通过向ng build添加参数来做到这一点。在production中，是否有任何与angular.json内部的</em
浏览 1提问于2018-05-21得票数 4
回答已采纳
我已经尝试在根目录ember-cli上创建一个文件，并根据以下代码放入JSON： "port": 5000但我的应用程序仍然在4200而不是5000上运行
浏览 92提问于2016-11-21得票数 414
回答已采纳
1回答
我使用ng generate component test创建了一个组件，生成的文件很少。有一个文件名为test.component.spec.ts。它有这样的内容。import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TestComponent } from
浏览 37提问于2018-12-06得票数 0
回答已采纳
我已经安装了角/cli，然后尝试运行命令ng serve，然后在下面抛出错误。我尝试过很多东西，比如卸载角/cli，npm缓存清理，等等。
无法确定@角/编译器-cli和类型标的版本。最常见的原因是npm安装失败。请确保您的package.json同时包含了devDependencies中的@ run /编译程序-cli和类型记录，然后删除node_modules和package-lock.json (如果有)并再次运行
浏览 10提问于2017-11-08得票数 28
主要来说，如果你是一个新手，并且你想在不花很多时间做设置的情况下开始angular编程，使用angular CLI来创建文件结构和你的基本配置文件(以及添加一些你自己的额外依赖项)是不是一个坏主意？我想我想问的是，angular cli只是angular 2新手使用angular 2编码和做一些个人项目的工具，还是开发人员在企业
浏览 0提问于2017-08-15得票数 0
作为一个警告，我们将在下一个版本中将CLI npm包移动到"@angular/cli“，它将只支持Node 6.9和更高版本。不久之后，这个包将被正式弃用。
浏览 1提问于2017-12-01得票数 10
我正在尝试按照Angular网站中提到的步骤使用angular CLI设置angular应用程序。永远卡在加载画面中。设置步骤如下：2) npm install -g typescript4) ng新的PROJECT_NAME
5) cd
浏览 6提问于2017-03-01得票数 2
我已经设置了angular-cli.json第9行的"outDir"："dist/ bice /“，构建没有问题，但我需要开发环境来反映Bices子目录。例如，Linux (arch/antergos)node: 7.5.0@angular/common:2.4.0
@angu
浏览 5提问于2017-02-10得票数 2
回答已采纳
2回答
通过运行以下命令，我尝试将角7降为角6：npm cache clean但是，angular/cli 7版本仍然显示在package.json文件中。我需要帮助把angular7降级为angular6。
浏览 5提问于2019-02-27得票数 7
回答已采纳
我在全球范围内安装了最新的角cli，我的项目正在成功构建。为了使用build命令，您必须在角-cli项目中。我的棱角分明的版本没有改变。为什么我的项目没有被认为是一个角-
浏览 12提问于2016-08-24得票数 130
回答已采纳
_getProjectWorkspaceFilePath (/usr/local/lib/node_modules/@angular/cli/models/workspace-loader.js:37:_loadWorkspaceAndArchitect (/usr/local/lib/node_modules/@angular/cli/models/archite
浏览 4提问于2018-08-13得票数 1
1回答
离子发球抛出运行时间错误
、、、
我正在开发一个IONIC2混合应用程序。但是当我运行ionic serve命令时，它会在构建过程后抛出异常。错误:应用程序脚本服务意外失败。(节点:3412) UnhandledPromiseRejectionWarning:未处理的承诺拒绝(拒绝id: 1)：错误:通道关闭(节点:3412) DeprecationWarning:不推荐使用未处理的承诺拒绝将来，未处理的promise rejections将使用
浏览 1提问于2017-05-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
