Unable to bring in Angular2 bootstrap function

I am currently setting up a basic Angular 2 (beta 2) app using TypeScript. I have the code for app.ts file taken from Angular's most recent setup guide

import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
    selector: 'app'
})
@View({
    template: `
        <div></div>
    `
})
class AppComponent {
    constructor() {}
}

bootstrap(AppComponent);

However, when trying to compile it, I encounter an error message:

Error TS2307: Cannot find module 'angular2/angular2'.

Alternately, if I use a different format from other sources with angular2/core instead of angular2/angular2, like this:

import {Component, View, bootstrap} from 'angular2/core';

I receive the following error:

Error TS2305: Module '"node_modules/angular2/core"' has no exported member 'bootstrap'.

What steps should I take to import all these modules successfully?

Answer №1

The bootstrap has been relocated from angular2/angular2 to angular2/platform/browser. Therefore, you must now import it as:

import {Component, View} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

Answer №2

Updates in Angular2 alpha-53 have altered the list of imports, moving away from the traditional angular2/angular2

With Angular2 alpha-53, it's now possible to import bootstrap from angular2/platform/browser.

For those in need, here is a comprehensive list of all the imports:

import{Component,View,Directive,Input,Output,Inject,Injectable,provide,ElementRef} from 'angular2/core'; 

import {bootstrap} from 'angular2/platform/browser';

import{CORE_DIRECTIVES,FORM_DIRECTIVES,NgClass,NgIfNgForm,Control,ControlGroup, FormBuilder, Validators} from 'angular2/common';

import{RouteConfig,ROUTER_DIRECTIVES,ROUTER_PROVIDERS,Router,LocationStrategy, HashLocationStrategy} from 'angular2/router';

import {Http, HTTP_PROVIDERS, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http'

Note: The import list has undergone significant changes, as detailed in the official Angular changelog for version 2.0 alpha 53 dated December 13, 2015.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a connection to an external website through a JavaScript function within an Angular application

I am currently working on an Angular application. Within the index.html file, there is a header that contains links to external websites. <a href="#" onclick="getExternalUrl('about.html');">Click here </a> <scr ...

Implementing TypeScript with react-router-dom v6 and using withRouter for class components

Trying to migrate my TypeScript React app to use react-router-dom version v6, but facing challenges. The official react-router-dom documentation mentions: When upgrading to v5.1, it's advised to replace all instances of withRouter with hooks. Howe ...

What steps do I need to take to create a customizable Angular Material NPM module?

Can a custom npm module be created using Angular Material that allows the components to be styled by the consuming app's unique theme? For instance, imagine an npm module with a component containing the following template: <button mat-raised-butt ...

Having multiple template bindings on a single element is not possible. Please utilize only one attribute with the prefix "*" for </mat-header-cell>

I encountered the following error: ERROR in Can't have multiple template bindings on one element. Use only one attribute prefixed with * (" <mat-header-cell> <mat-cell *matCellDef="let order" class="{{orderColum ...

Issue with Datatables not loading on page reload within an Angular 7 application

Incorporating jQuery.dataTables into my Angular 7 project was a success. I installed all the necessary node modules, configured them accordingly, and added the required files to the angular.json file. Everything functioned perfectly after the initial launc ...

Exploring the power of global injectors in Angular 7 for component inheritance

Recently, I have been following a method outlined in a blog post on MSDN to simplify the extension of components without having to include all dependencies in the super() call. However, this approach seems to have ceased working in Angular 7 with Typescrip ...

What is the reason for Akita statestore returning an empty entity instead of the updated entity?

I'm utilizing Akita as the state management solution for my Angular application. Currently, I can retrieve data from a backend server and populate my store successfully (the data is displayed in components). However, when attempting to update an enti ...

What is the best way to present sorted items on a user interface?

I have a unique Med interface containing properties like drugClass, dosage, and name. Using this interface, I created an array of drugs with different attributes. How can I filter this array by drugClass and then display the filtered data on a web page? ...

Passing index value using navigateByUrl method

I have developed a home component and a view component to display different levels of employee details. The home component presents basic information, while the view component shows comprehensive details. The code in my home.component.html file looks like ...

How can I create an interceptor in Angular2 to detect 500 and 404 errors in my app.ts file?

Creating an Angular2 Interceptor for Handling 500 and 404 Errors in app.ts In my app.ts file, I am looking to implement an interceptor that can detect a 500 or 404 error so that I can appropriately redirect to my HTML 404 or HTML 500 pages. Is this funct ...

Use the IONIC CAPACITOR application to send a 20-byte command to a BLE device

Hello everyone, I am currently working on an application that is designed to connect to a BLE device. I have a requirement to write 20 Bytes to the device using BleClient.write function. 34h 01h 50h 4Fh 4Ch 49h 54h 45h 43h 00 00 00h 00h 00h 00h 00h 00h 00h ...

How to define an index signature in Typescript that includes both mandatory and optional keys

I am on a quest to discover a more refined approach for creating a type that permits certain keys of its index signature to be optional. Perhaps this is a scenario where generics would shine, but I have yet to unlock the solution. At present, my construc ...

Create a global variable by importing an external module in TypeScript

I am currently developing a TypeScript npm module called https://www.npmjs.com/package/html2commonmark. This module is versatile and can be utilized in nodejs (via require) as well as in the browser (by loading node_modules/html2commonmark/dist/client/bund ...

Angular Universal in combination with AngularFire server experiences a hanging issue due to the first() pipe

I am currently developing an angular/firestore application that requires SSR capabilities. I have integrated angular universal into the project and everything seems to be functioning properly until I utilize the first() pipe on any of the firestore calls, ...

The error message "Property <property> is not recognized on the type 'jQueryStatic<HTMLElement>'" is indicating an issue with accessing a specific property within the TypeScript codebase that utilizes Angular CLI, NPM,

My Development Environment I am utilizing Angular, Angular CLI, NPM, and Typescript in my web application development. Within one of my components, I require the use of jQuery to initialize a jQuery plugin. In this particular case, the plugin in question ...

The problem of I18n localization/merging not functioning properly in Angular 10 post-upgrade from Angular 7

Angular CLI: 10.2.0 Node: 12.14.1 OS: win32 x64 \\Angular: 10.1.6 \\... common, compiler, compiler-cli, core, forms \\... language-service, localize, platform-browser \\... platform-browser-dynamic, r ...

Ensure that the MUI icon color is set accurately

I created a functional component to set default values for react-admin's BooleanField. Here is the code: import ClearIcon from '@mui/icons-material/Clear' import DoneIcon from '@mui/icons-material/Done' import get from ...

Exit the current dialog and switch to a different route while encountering difficulties with an open dialog in Angular 4

I've spent several hours searching, but couldn't find a similar post. Here's the issue I'm facing: When I click a button in the routeA component, it navigates to routeB and opens dialogB. After closing dialogB, it should navigate back ...

Updating a component's value in Angular 6 when there is a change in the corresponding service

My objective sounds straightforward, but I am struggling to implement it: I want one of my components to automatically update when a variable in a service changes. To illustrate my issue, consider the following example: Imagine having a service that incr ...

I'm experiencing issues with event.preventDefault() not functioning properly when used within a contenteditable div

I'm currently working with some basic Angular 7.x code that involves a contenteditable div. I'm attempting to prevent the default action when a user hits the [ENTER] key, but no matter what I do, it still moves the cursor to the next line. What a ...